<template>
    <div class="app-container home-container">
      <div class="welcome-text">欢迎来到XX漫展！</div>
        
        <el-button 
          class="action-button"
          icon="el-icon-user" 
          type="success" 
          round 
          @click="redirect('/cd/form/submit/1')">
          自由行报名
        </el-button>

    </div>
  </template>

<script>

export default {
  name: "free-tour",
  methods: {
    redirect(pageUrl) {
      // 跳转到/loginCustomer并携带url参数
      this.$router.push({
        path: '/toPage',
        query: {
          url: pageUrl
        }
      });
    },
    toLogin() {
      // 跳转到/loginCustomer并携带url参数
      this.$router.push({
        path: '/login'
      });
    }

  }
};
</script>
<style scoped lang="scss">
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  
  .welcome-text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
    
    @media (max-width: 768px) {
      font-size: 20px;
      margin-bottom: 30px;
    }
  }
  
  .button-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    
    @media (min-width: 768px) {
      flex-direction: row;
      justify-content: center;
    }
  }
  
  .action-button {
    padding: 15px 25px;
    font-size: 16px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    @media (max-width: 768px) {
      width: 100%;
      padding: 12px 20px;
    }
  }
}
</style>